<template>
	<div id="energy-chart" style="width: 100%; height: 400px"></div>
</template>

<script>
	import * as echarts from "echarts"

	export default {
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				const chartDom = document.getElementById("energy-chart")
				const myChart = echarts.init(chartDom)
				const option = {
					title: {
						text: "时间能耗同环比分析",
						left: "20",
					},
					// subtitle: {
					// 	text: "综合能耗趋势分析",
					// 	left: "left",
					// },
					toolbox: {
						feature: {
							print: {},
							export: {},
						},
						right: 10,
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "shadow",
						},
					},
					xAxis: [
						{
							type: "category",
							data: [
								"2024-06-02",
								"2024-06-06",
								"2024-06-10",
								"2024-06-14",
								"2024-06-18",
								"2024-06-22",
								"2024-06-22",
								"11:00",
								"12:00",
								"13:00",
								"14:00",
							],
							axisTick: {
								alignWithLabel: true,
							},
						},
					],
					yAxis: [
						{
							type: "value",
						},
					],
					series: [
						{
							name: "用能值",
							type: "bar",
							data: [
								2200000, 2100000, 1100000, 2600000, 1100000, 1300000, 600000,
								1200000, 1000000, 2300000, 2200000, 1400000, 1100000, 1000000,
								2300000, 2300000, 1200000, 1100000, 1000000,
							],
						},
						{
							name: "建筑1",
							type: "line",
							data: [
								700000, 1000000, 1700000, 1500000, 1800000, 2500000, 1100000,
								1200000, 1300000, 2000000, 2400000, 1300000, 1200000, 2000000,
								2500000, 1200000, 1300000, 1400000, 2000000,
							],
							lineStyle: {
								color: "green",
							},
						},
						{
							name: "建筑2",
							type: "line",
							data: [
								1300000, 1600000, 900000, 1900000, 1200000, 1500000, 900000,
								1600000, 1700000, 1100000, 1800000, 1700000, 800000, 1700000,
								1900000, 1200000, 1500000, 1300000, 1200000,
							],
							lineStyle: {
								color: "orange",
							},
						},
					],
				}
				myChart.setOption(option)
			},
		},
	}
</script>

<style scoped>
	/* 可根据需要添加样式 */
</style>
